<template>
    <view class="user bg-white mx-[20rpx] mt-[20rpx] rounded-lg" v-if="content.enabled">
        <view class="order-info card">
            <view class="order-info--main flex justify-around">
                <view class="order-menu-item" v-for="(item, index) in content.data" :key="index">
                    <navigator hover-class="none" :url="item.link">
                        <!-- <text class="badge" v-if="userInfo?.wait_pay_num">{{
                            userInfo?.wait_pay_num
                        }}</text> -->
                        <image :src="getImageUrl(item.image)"></image>
                        <view class="order-menu-item--text"> {{ item.name }} </view>
                        <view class="second-title">{{ item.secName }}</view>
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})
const { getImageUrl } = useAppStore()
</script>

<style lang="scss" scoped>
.user {
    padding: 0 24rpx;
    // background: linear-gradient(180deg, #f0f7ff 0%, rgba(255, 255, 255, 0) 130rpx, transparent 0);
    // background-color: white;

    // 订单信息
    .order-info {
        // padding: 24rpx;
        padding-top: 24rpx;
        padding-bottom: 38rpx;
        &--main {
            .order-menu-item {
                flex: auto;
                text-align: center;
                position: relative;
                image {
                    width: 70rpx;
                    height: 70rpx;
                }
                &--text {
                    color: $color-text-deep;
                    font-size: $font-size-md;
                    font-weight: 500;
                    margin-bottom: 10rpx;
                }
                .second-title {
                    font-family: 'PingFang SC';
                    font-weight: 400;
                    font-size: 24rpx;
                    text-align: center;
                    color: #888;
                }
            }
        }
    }
}
</style>
